
function drawCards(data) {
	layui.use(['laypage', 'layer', 'laytpl'], function() {
		var laypage = layui.laypage,
		layer = layui.layer;
		var $ = layui.jquery;
		var laytpl = layui.laytpl;

		var nums = 20; //每页出现的数据量
		//模拟渲染
		var render = function(curr) {
			//此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
			var str = '';
			var li = '<li style="width:300px; height:120px; cursor:pointer; border: 1px solid #ccc; font-size:14px;  border-radius: 0 0 4px 4px; float:left; margin:10px;">';
			var p1 = '<p style="width:100%;  position：absolute;  height:4px; background:';
			var p2 = '; ">';
			var span = '<b style="padding-left:10px; padding-top:5px;  font-size:14px; text-align: center;">';
			var pover = '</p>';
			var liover = '</li>';
			var spanover = '</b>';
			last = curr * nums - 1;
			last = last >= data.numReturn ? (data.numReturn - 1) : last;
			for(var i = (curr * nums - nums); i <= last; i++) {
				var humCh2 = (data.result[i].humCh2 == '' || data.result[i].humCh2 == undefined || data.result[i].humCh2 == null) ? '- -' : data.result[i].humCh2 + '%';
				var temCh2 = (data.result[i].temCh2 == '' || data.result[i].temCh2 == undefined || data.result[i].temCh2 == null) ? '- -' : data.result[i].temCh2 + '℃';
				var monitorPosition = (data.result[i].monitorPosition == null) ? '' : data.result[i].monitorPosition; // 测点位置
				var temCh1 = (data.result[i].temCh1 == '' || data.result[i].temCh1 == null) ? '- -' : data.result[i].temCh1 + '℃';
				var humCh1 = (data.result[i].humCh1 == '' || data.result[i].humCh1 == null) ? '- -' : data.result[i].humCh1 + '%';
				var deviceId = '<input type="text" style="display:none;" id=' + data.result[i].deviceId + ' />';
				//console.log(deviceId);
				var colors = '';
				var deviceStateInfo = '';
				if(data.result[i].deviceState == 0) {
					color = '#fad70c';
					deviceStateInfo = '<i style="color:#fad70c; padding-top:5px; font-size:24px; padding-right:10px;" class="iconfont icon-jinggao"></i>';
				} else if(data.result[i].deviceState == 1) {
					deviceStateInfo = '<i style="color:#ff6b61; padding-top:5px; font-size:24px; padding-right:10px;" class="iconfont icon-baojing"></i>';
					color = '#ff6b61';
				} else if(data.result[i].deviceState == 2) {
					deviceStateInfo = '<i style="color:#4bcdb3; padding-top:5px; font-size:24px; padding-right:10px;" class="iconfont icon-chenggong"></i>';
					color = '#4bcdb3';
				} else if(data.result[i].deviceState == 3) {
					deviceStateInfo = '<i style="color:#71879e; padding-top:5px; font-size:24px; padding-right:10px;" class="iconfont icon-duankai"></i>';
					color = '#71879e';
				};
				var sceneId = '';
				if(data.result[i].sceneId == 1) {
					sceneId = '常温库';
				} else if(data.result[i].sceneId == 2) {
					sceneId = '阴凉库';
				} else if(data.result[i].sceneId == 3) {
					sceneId = '冷藏库';
				} else if(data.result[i].sceneId == 4) {
					sceneId = '冷藏车';
				} else if(data.result[i].sceneId == 5) {
					sceneId = '冷藏箱';
				} else if(data.result[i].sceneId == 6) {
					sceneId = '医用冰箱';
				} else if(data.result[i].sceneId == 0) {
					sceneId = '其他';
				}
				var deviceTypeInfo = '';
				if(data.result[i].deviceType == 1) {
					deviceTypeInfo = '<i style="color:#000;font-size:18px; padding-top:8px; padding-right:10px;" class="iconfont icon-wifi"></i>';
				} else {
					deviceTypeInfo = '<i style="color:#000;font-size:18px; padding-top:8px; padding-right:10px;" class="iconfont icon-gprs"></i>';
				}
				str += li + deviceId + p1 + color + p2 + pover + span + deviceTypeInfo + '[' + sceneId + ']' + data.result[i].deviceName + spanover + '<span style="float:right;">' + deviceStateInfo + '</span></br>' +
					'<p style="margin:10px; padding-top:10px; text-align: center; font-size:12px; ">' + temCh1 + humCh1 + '&nbsp;&nbsp;&nbsp;&nbsp;' + temCh2 + humCh2 + '</p>' +
					'<p style="position:relative;font-size:14px; color:#999; top:5px; padding-left:10px;">' + monitorPosition + '</br><span style="float:right; color:#000; font-size:12px; padding-right:15px;">' + data.result[i].lastRecordInfo + '</span></p>' + liover;
			}
			return str;
		}
		//调用分页
		laypage({
			cont: 'demo7',
			pages: Math.ceil(data.numReturn / nums), //得到总页数
			
			skip: false,
			skin: '#38c265',
			prev: '上一页',
			next: '下一页',
			first: false,
			last: false,
			jump: function(obj) {
				document.getElementById('biuuu_city_list').innerHTML = render(obj.curr);
				$('#biuuu_city_list li').on('click', function() {
					var deviceId = $(this).find('input').attr('id');
					var username = '查看设备';
					var href = 'device_detail_tabs.html?deviceId=' + deviceId;
					var index = layer.open({
						type: 2,
						title: username,
						fixed: false,
						maxmin:false,
						area: ['100%', '100%'],
						content: href,
					});
					layer.full(index);
				});
			}
		});
		/*设备-查看*/
		
		//条件查询
		$(".btn_block > label").click(function() {
			$(this).siblings().removeClass("layui-btn-block").addClass("layui-btn-none");
			$(this).addClass("layui-btn-block");
		});

	});
}